<template>
  <div class="company-details">
    <div>
      <!-- 导航栏组件 -->
      <nav-bar />
      <!-- 图片 -->
      <van-row class="photo">
        <img
          v-if="companyinfo[0]"
          fit="cover"
          :src="companyinfo[0].image"
          class="photograph"
        />
      </van-row>

      <!-- 宫格 -->
      <!-- <van-grid :border="false" :column-num="2" class="attention">
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
      </van-grid-item>
    </van-grid> -->

      <van-card class="attention">
        <template #tags>
          <van-row type="flex" justify="center">
            <van-col span="11">
              <p class="number">1</p>
              <p class="text">注册家政员数</p>
            </van-col>
            <van-col span="2" class="shuxian"></van-col>
            <van-col span="11">
              <p class="number">1000</p>
              <p class="text">已认证客户数</p>
            </van-col>
          </van-row>
        </template>
        <template #footer>
          <van-row type="flex" justify="center">
            <van-button class="btn-attention">关注</van-button>
          </van-row>
        </template>
      </van-card>
      <!-- 业务范围 -->
      <van-card class="business">
        <template #tags>
          <van-row class="head">
            <i class="iconfont jiazhengshuxian"></i>
            <span class="title">业务范围</span>
          </van-row>
          <van-row class="border">
            <van-grid :column-num="5" :border="false">
              <van-grid-item>
                <img
                  round
                  v-if="companyinfo[0]"
                  :src="companyinfo[0].image"
                  class="picture"
                />
                <p class="text">月嫂</p>
              </van-grid-item>
              <van-grid-item>
                <img
                  round
                  v-if="companyinfo[0]"
                  :src="companyinfo[0].image"
                  class="picture"
                />
                <p class="text">育婴师</p>
              </van-grid-item>
              <van-grid-item>
                <img
                  round
                  v-if="companyinfo[0]"
                  :src="companyinfo[0].image"
                  class="picture"
                />
                <p class="text">保姆</p>
              </van-grid-item>
            </van-grid>
          </van-row>
        </template>
      </van-card>
      <!-- tab栏切换 -->
      <company-info />
    </div>
    <!-- tabber的组件 -->
    <share-page />
  </div>
</template>

<script>
import { getcompanys } from "@/api/user";
// 导航栏
import NavBar from "../components/navigation.vue";
// tab栏切换
import companyInfo from "./components/companyInfo.vue";
// tabber
import SharePage from "./components/operation";
export default {
  name: "CompanyDetails",
  components: { NavBar, companyInfo, SharePage },
  data() {
    return {
      companyinfo: [],
      id: this.$route.query.id
    };
  },
  created() {
    this.getcompanys();
  },
  mounted() {},
  methods: {
    async getcompanys() {
      const { data } = await getcompanys();
      this.companyinfo = data.filter(item => item.id === this.id);
      console.log(this.companyinfo);
    }
  }
};
</script>

<style scoped lang="scss">
.company-details {
  position: relative;
  z-index: 9999;
  .photo {
    height: 298px;
    width: 100%;
    .photograph {
      display: block;
      width: 674px;
      height: 342px;
      position: absolute;
      top: 136px;
      left: 40px;
      z-index: 1;
    }
  }
  // 关注卡片
  .attention {
    width: 674px;
    height: 292px;
    margin-left: 40px;
    margin-top: 20px;
    background-color: #fff;
    padding: 0;
    p {
      margin: 0px;
    }
    .number {
      font-size: 48px;
      color: #3f51b5;
      font-weight: bold;
      text-align: center;
      margin: 48px 0 18px;
    }
    .text {
      font-size: 26px;
      text-align: center;
    }
  }
  .btn-attention {
    height: 50px;
    width: 144px;
    border-radius: 25px;
    color: #fff;
    background-color: #3f51b5;
    border: 0;
    font-size: 26px;
    margin-top: 20px;
  }
  .shuxian {
    height: 68px;
    width: 1px;
    background-color: #e5e5e5;
    margin-top: 90px;
  }

  .business {
    margin-left: 40px;
    width: 674px;
    height: 326px;
    padding-top: 0;
    background-color: #fff;
    margin-bottom: 20px;
    .van-card__header {
      height: 100%;
    }
    .head {
      height: 100px;
      .title {
        font-size: 28px;
        line-height: 106px;
      }
    }

    .border {
      box-sizing: border-box;
      height: 200px;
      border-top: 4px solid #f8f8f8;
      .van-grid {
        height: 100%;
        .van-grid-item {
          height: 100%;
        }
      }
    }
    .picture {
      height: 100px;
      width: 100px;
    }
    .text {
      font-size: 26px;
    }
  }

  // 字体图标
  .jiazhengshuxian {
    font-size: 32px;
    color: #3f51b5;
  }
}
</style>
